<template>
	<picker @change="bindPickerChange" :class="[className, 'picker']" :value="selectedInd"
			:range="optionsList" :range-key="rangeKey"
			:style="styleName">
		<slot>
			<view class="selected-txt">
				<view :style="selectedStyle" :class="selectedClassName">{{valueText}}</view>
				<text class='addr-img' :class="['clp-arrow icon iconfont icon-xia']"></text>
			</view>
		</slot>
	</picker>
</template>

<script>
	import {isNumber} from 'lodash';

	export default {
		name: 'pickerSelect',
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			params: {
				// type: [Object, String],
				default: null
			},
			valueKey: {
				type: String,
				default: 'id'
			},
			rangeKey: {
				type: String,
				default: 'name'
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			className: {
				type: String,
				default: ''
			},
			styleName: {
				type: String,
				default: ''
			},
			selectedClassName: {
				type: String,
				default: ''
			},
			selectedStyle: {
				type: String,
				default: 'margin-left:10px;width:100%;'
			}
		},
		data() {
			const emptyObj = {
				id: '',
				name: this.placeholder,
				code: ''
			};
			emptyObj[this.valueKey] = '';
			emptyObj[this.rangeKey] = this.placeholder;

			return {
				emptyObj
			}
		},
		computed: {
			optionsList() {
				console.log('options<<<<<<<<<<<',this.options)
				const options = this.options || [];
				return [this.emptyObj, ...options]
			},
			selectedInd() {
				const optionList = this.optionsList || [];
				let ind = 0;
				for (var i = 0; i < optionList.length; i++) {
					let option = optionList[i];
					let optValue = option[this.valueKey];
					if (isNumber(this.value)) {
						optValue = parseFloat(optValue);
					}
					if (this.value === optValue) {
						ind = i;
						break;
					}
				}
				// console.log('>>> ind', ind);
				return ind;
			},
			seletedValue() {
				const optionList = this.optionsList || [];
				let selectedObj = this.emptyObj;
				for (var i = 0; i < optionList.length; i++) {
					let option = optionList[i];
					let optValue = option[this.valueKey];
					if (isNumber(this.value)) {
						optValue = parseFloat(optValue);
					}
					if (this.value === optValue) {
						selectedObj = option;
						break;
					}
				}
				return selectedObj;
			},
			valueText() {
				return this.seletedValue[this.rangeKey] || this.placeholder;
			}
		},
		methods: {
			bindPickerChange(e) {
				const ind = e.target.value;
				const selectedObj = this.optionsList[ind] || this.emptyObj;
				// console.log('>>> bindPickerChange selectedObj', selectedObj, this.params);
				this.$emit('change', {
					value: selectedObj[this.valueKey],
					selectedObj,
					params: this.params
				}, e);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../common/common.scss";
	.selected-txt{
		display: flex;
		align-items: center;
		font-size: 28upx;
		.addr-img{
			display: inline-block;
			position: absolute;
			right:12px;
			font-size: 20upx;
			color: #AAAAAA;

		}
	}

</style>
